<template>
    <div class="big">
        <!-- 导航栏 -->
        <div class="navigation">
            <div class="icon" @click="back">
                <img src="../../assets/home-img/返回1.png" alt="">
            </div>
            <h2 class="title">皮肤性病_妙手医生</h2>
            <div class="icon">
                <img src="../../assets/home-img/分享1.png" alt="">
            </div>
        </div>
        <!-- 大标题 -->
        <div class="bigTitle">
            圆心·<span>妙手医生</span>
        </div>
        <!-- 搜索框 -->
        <div class="search">
            <div class="searchItem">
                <input type="text" placeholder="搜一搜解决健康问题">
                <button>搜索</button>
            </div>
        </div>
        <!-- tab切换 -->
        <div class="healthList">
            <div class="healthTop">
                <van-tabs v-model:active="active" sticky @change="toChange">
                    <van-tab v-for="(item, index) in healthList" :key="index" :title="item">
                    </van-tab>
                </van-tabs>
            </div>
            <div class="healthBottom">
                <div class="healthItem" v-for="(item, index) in clsItem" :key="index" @click="tohealthDetail(item.id)">
                    <div class="clsItem-l">
                        <h3 class="healthTitle">{{ item.title }}</h3>
                        <div class="describe">
                            <div class="van-multi-ellipsis--l2">
                                {{ item.chi }}
                            </div>
                        </div>
                        <div class="person">
                            <img class="head" src="../../assets/home-img/极速问诊.png" alt="">&ensp;
                            <span>{{ item.name }}</span>&ensp;
                            <img class="icon" src="../../assets/home-img/v标.png" alt="">&ensp;
                            <span>{{ item.class }}</span>&ensp;
                            <span>{{ item.position }}</span>
                        </div>
                    </div>
                    <div class="clsItem-r">
                        <img src="../../assets/home-img/健康.png" alt="">
                        <span>
                            <img class="eye" src="../../assets/home-img/眼睛.png" alt="">
                            {{ item.browse }}
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import http from '../../http/http'
import router from '@/router';

const healthList = ref(['皮肤性病', '肿瘤', '心理健康', '两性科普'])

const active = ref(0);
const healthItem = ref([]);
const clsItem = ref([]);
const cls = ref(1);

// 获取数据
const getHealthItem = async () => {
    await http.get(`/science`).then(res => {
        healthItem.value = res.data.data
        clsItem.value = healthItem.value.filter(item => item.tabid === cls.value)
    })
}
const toChange = (index) => {
    cls.value = index + 1;
    clsItem.value = healthItem.value.filter(item => item.tabid === cls.value)
    console.log('====================================');
    console.log(clsItem.value);
    console.log('====================================');
}

// 返回上一页
const back = () => {
    history.back()
}

// 跳转到详情页
const tohealthDetail = (id) => {
    router.push({ path: '/healthDetail', query: { id } })
}

onMounted(() => {
    getHealthItem()
})
</script>

<style scoped lang="scss">
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.big {
    width: 100%;
    height: 100vh;
    overflow: scroll;
    -ms-overflow-style: none;

    &::-webkit-scrollbar {
        display: none;
    }

    .navigation {
        width: 100%;
        height: 100px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background-color: #fff;

        .icon {
            margin: 0 20px;

            img {
                width: 50px;
                height: 50px;
                border-radius: 27.5px;
            }
        }

        .title {
            font-size: 40px;
        }
    }

    .bigTitle {
        width: 95%;
        margin: auto;
        font-size: 40px;
        font-weight: bolder;

        span {
            color: #116ae8;
        }
    }

    .search {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 20px;

        .searchItem {
            width: 95%;
            height: 70px;
            // background-color: #eee;
            border: 2px solid black;
            border-radius: 35px;
            display: flex;
            align-items: center;

            input {
                width: 78%;
                height: 45px;
                text-indent: 2em;
                background-color: rgba(255, 255, 255, 0.3);
                background-image: url('../../assets/home-img/搜索.png');
                background-position: 30px center;
                background-size: 40px 40px;
                background-repeat: no-repeat;
                padding-left: 10px;
                border: 0;
                margin-right: 20px;
                font-size: 34px;
                outline: none;
                border-right: 2px solid #b7b7b7;

                &::placeholder {
                    color: #b7b7b7;
                    font-weight: 400;
                    font-size: 30px;
                }
            }

            button {
                font-size: 35px;
                background-color: #fff;
                border: 0;
                padding: 0 10px;

                //     &::before {
                //         content: '';
                //         width: 2px;
                //         height: 30px;
                //         background-color: #b7b7b7;
                //         border-left: 2px solid #b7b7b7;
                //     }
            }
        }
    }

    .healthList {
        width: 100%;
        background-color: #f8f8f8;

        .healthTop {
            width: 100%;
        }

        .healthBottom {
            width: 100%;
            background-color: #f8f8f8;

            .healthItem {
                width: 95%;
                padding: 10px 20px;
                margin: 20px auto;
                display: flex;
                justify-content: space-between;
                background-color: #fff;
                border-radius: 10px;

                .clsItem-l {
                    width: 60%;

                    .healthTitle {
                        line-height: 90px;
                    }

                    .describe {
                        line-height: 40px;
                        color: #1f1f1f;
                    }

                    .person {
                        width: 100%;
                        height: 65px;
                        display: flex;
                        justify-content: flex-start;
                        align-items: center;
                        color: #575757;

                        .head {
                            width: 55px;
                            height: 55px;
                        }

                        .icon {
                            width: 22px;
                            height: 22px;
                        }
                    }
                }

                .clsItem-r {
                    width: 40%;
                    display: flex;
                    flex-direction: column;
                    padding-top: 10px;

                    img {
                        width: 275px;
                        height: 175px;
                    }

                    span {
                        height: 40px;
                        display: flex;
                        justify-content: flex-end;
                        align-items: center;

                        img {
                            width: 25px;
                            height: 25px;
                            margin-right: 10px;
                        }
                    }
                }
            }
        }
    }
}
</style>
